<template>
  <el-dialog :title="titleMap[mode]" v-model="visible" :width="500" destroy-on-close @closed="$emit('closed')">
    <el-form :model="form" :rules="rules" :disabled="mode==='show'" ref="formRef" label-width="100px"
             label-position="left">
      <el-form-item label="唯一标识" prop="uuid" v-if="mode==='show'">
        <el-input v-model="form.uuid" clearable disabled></el-input>
      </el-form-item>
      <el-form-item label="创建时间" prop="createdAt" v-if="mode==='show'">
        <el-input v-model="form.createdAt" clearable disabled></el-input>
      </el-form-item>
      <el-form-item label="角色名称" prop="roleName">
        <el-input v-model="form.roleName" clearable></el-input>
      </el-form-item>
      <el-form-item label="角色别名" prop="roleCode">
        <el-input v-model="form.roleCode" clearable></el-input>
      </el-form-item>
      <el-form-item label="排序" prop="roleSort">
        <el-input-number v-model="form.roleSort" :min="0"
                         style="width: 100%;"></el-input-number>
      </el-form-item>
      <el-form-item label="是否有效" prop="roleStatus">
        <el-switch v-model="form.roleStatus" :active-value="1" :inactive-value="0"></el-switch>
      </el-form-item>
      <el-form-item label="备注" prop="roleNotes">
        <el-input v-model="form.roleNotes" clearable type="textarea"></el-input>
      </el-form-item>
    </el-form>
    <template #footer>
      <el-button @click="visible=false">取 消</el-button>
      <el-button v-if="mode!=='show'" type="primary" :loading="isSaveing" @click="submit()">保 存</el-button>
    </template>
  </el-dialog>
</template>

<script setup>

import {reactive, ref} from "vue";
import {ElMessage} from "element-plus";
import Apis from '@/api'

const emit = defineEmits(['success', 'closed'])

let mode = ref("add",)
let titleMap = reactive({
  add: '新增',
  edit: '编辑',
  show: '查看'
})
let visible = ref(false)
let isSaveing = ref(false)
//表单数据
let form = reactive({
  uuid: "",
  createdAt: '',
  roleName: "",
  roleCode: "",
  roleSort: 1,
  roleStatus: 1,
  roleNotes: ""
})
//验证规则
const rules = reactive({
  roleSort: [
    {required: true, message: '请输入排序', trigger: 'change'}
  ],
  roleName: [
    {required: true, message: '请输入角色名称'}
  ],
  roleCode: [
    {required: true, message: '请输入角色别名'}
  ]
})

let formRef = ref()


//表单提交方法
const submit = () => {
  formRef.value.validate(async (valid) => {
    if (valid) {
      isSaveing.value = true;
      let res = mode.value === 'add' ? await Apis.api_setting.role.create.post(form) : await Apis.api_setting.role.update.post(form);
      isSaveing.value = false;
      if (res.code === 0) {
        if (mode.value === 'add') {
          form.uuid = res.data.uuid
          form.createdAt = res.data.createdAt
        }
        emit('success', form, mode.value)
        visible.value = false;
        ElMessage.success("操作成功")
      } else {
        ElMessage.error(res.message)
      }
    }
  })
}
//表单注入数据
const setData = (data, m = 'add') => {
  Object.assign(form, data)
  mode.value = m;
  visible.value = true;
}

defineExpose({
  setData
})


</script>

<style>
</style>
